<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>moviehalls</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet"
	href="layui/css/layui.css"
	media="all">
<link rel="stylesheet"
	href="font-awesome-4.7.0/css/font-awesome.css" />
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
	 <div>

<!-- 添加 -->
		<div id="addFormDiv" style="display: none ;padding : 20px 30px 0 0;">
			<form class="layui-form" action="" lay-filter="example">

				<div class="layui-form-item">
					<label class="layui-form-label">影厅名称</label>
					<div class="layui-input-block">
						<input type="text" name="hallname1" id="hallname1" lay-verify="title"
							autocomplete="off" placeholder="请输入影厅名称" class="layui-input">
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">影厅类型</label>
					<div class="layui-input-block">
						<select name="halltypeid1"  id="halltypeid1" lay-filter="aihao">
						
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">影厅状态</label>
					<div class="layui-input-block">
						<input type="radio" name="hallstatus1" value="1" title="正常" checked="checked">
						<input type="radio" name="hallstatus1" value="0" title="维护中">
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn btn-update" type="button" lay-submit lay-filter="addMovieHalls">立即添加</button>
					</div>
				</div>
			</form>
		</div>
		
		<!-- 修改 -->
		<div id="editFormDiv" style="display: none;padding : 20px 30px 0 0;">
			<form class="layui-form" action="" lay-filter="example">

				<div class="layui-form-item">
					<label class="layui-form-label">影厅编号</label>
					<div class="layui-input-block">
						<input type="text" name="hallid2" id="hallid2" lay-verify="title"
							autocomplete="off" readonly class="layui-input">
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">影厅名称</label>
					<div class="layui-input-block">
						<input type="text" name="hallname2" id="hallname2"
							lay-verify="title" autocomplete="off" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">影厅类型</label>
					<div class="layui-input-block">
						<select name="halltypeid2"  id="halltypeid2" >
						
						</select>
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">影厅状态</label>
					<div class="layui-input-block">
						<input type="radio" name="hallstatus2" value="1" title="正常" checked="checked">
						<input type="radio" name="hallstatus2" value="0" title="维护中">
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn btn-update" type="button" 
						lay-submit	lay-filter="updMovieHall">立即修改</button>
					</div>
				</div>
			</form>
		</div>
		

		<div>
			<!-- 内容主体区域 -->
			<div style="padding: 15px;margin-bottom:200px">
				<div class="demoTable">
					搜索名字：
					<div class="layui-inline">
						<input class="layui-input" name="id" id="demoReload"
							autocomplete="off">
					</div>
					<button class="layui-btn" data-type="reload">搜索</button>
				</div>
				<table class="layui-hide" id="test" lay-filter="test" ></table>
			</div>
		</div>
		
	</div>


	<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
  <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">批量删除</button>
 <button class="layui-btn layui-btn-sm" lay-event="addMovieHall">添加信息</button>
    <!--<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button> -->
  </div>
</script>

	<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


	<script src="layui/layui.js"
		charset="utf-8"></script>
		
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

	<script>
	//动态加载影厅类型名(id)
		layui.use('layer',function(){
			var layer = layui.layer;
			    layer.ready(function(){
			    	$.get("getMovieHallTypes", function(data) {
			    		console.log(data);
						$.each(data, function(index, mht) {
							$("#halltypeid1").append(
									"<option value="+mht.halltypeid+">" + mht.halltypename
											+ "</option>");
							$("#halltypeid2").append(
									"<option value="+mht.halltypeid+">" + mht.halltypename
											+ "</option>");
						});
			    });  
		   });
		});

       //显示数据表格
		layui.use('table', function() {
			var table = layui.table;
			table.render({
				elem : '#test',
				url : 'selectMovieHall',//地址和springmvc中控制器地址一致
				toolbar : '#toolbarDemo',
				title : '影厅信息表',
				cols : [ [ {
					type : 'checkbox',
					fixed : 'left'
				}, {
					field : 'hallid',
					title : '影厅编号',
					width : 200,
					fixed : 'left',
					unresize : true,
					sort : true
				}, {
					field : 'hallname',
					title : '影厅名称',
					width : 450
				}, {
					field : 'mht',
					title : '影厅类型',
					width : 400,
					edit : 'text',
					templet:'<div>{{d.mht.halltypename}}</div>'//layui接收 对象.属性
				},{
					field : 'hallstatus',
					title : '影厅状态',
					width : 200,
					edit : 'text',
					templet:function(d){
						if(d.hallstatus ==0){
							return '维护中'
						}else{
							return '正常'
						}
					}
				},  {
					fixed : 'right',
					title : '操作',
					toolbar : '#barDemo',
					width : 375
				} ] ],
				page : true,
				id : 'testReload'
			});
		

			//头工具栏事件
			table.on('toolbar(test)', function(obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				switch (obj.event) {
				case 'getCheckData':
					var data = checkStatus.data;
					layer.alert(JSON.stringify(data));
					break;
				case 'getCheckLength':
				//批量删除
					var data = checkStatus.data;
					console.log(data[0].hallid);
					layer.confirm('确认要删除吗？', {
						icon : 3,
						title : '提示信息'
					}, function(index) {
						  //存储id的数组
						  var array = new Array();
						  for(var i=0;i<data.length;i++){
							array.push(data[i].hallid);
						  }
						  
						  //批量删除
						  $.ajax({
						         url : "delAllMovieHall",//提交地址
						         type : "post",//提交请求类型
						         data : {//提交给servlet的数据
						         array:array.toString(),//存储课程号数组的字符串
						         },
						         success : function(data) {//提交成功后的回调函数
							    	  layer.msg(data.msg, {
											icon : 6,
											time : 2000
										}, function() {
											//刷新页面
											window.location.reload();
									  }); 
						          },
						           dataType : "json"//预期返回的数据类型
					    });	
				      });
					break;
				case 'isAll':
					layer.msg(checkStatus.isAll ? '全选' : '未全选');
					break;
				case 'addMovieHall':
					//弹出增加框
					layer.open({
						type : 1//弹出层 div
						,
						area : [ '600px', '430px' ],
						shade : 0.6,
						id : 'LAY_layuipro1' //设定一个id，防止重复弹出
						,
						content : $("#addFormDiv"), //后面不用.html()
					});
				}
			});

			//监听行工具事件
			table.on('tool(test)', function(obj) {
				var data = obj.data;
				//删除单个
				if (obj.event === 'del') {
					layer.confirm('确定要删除编号为'+data.hallid+"的影厅吗", function(index) {
						//console.log(data); //得到的是当前行对应的数据信息
						console.log("hallid :" + data.hallid);
						$.ajax({
							type : "get", //提交方式
							url : "delMovieHall/" + data.hallid, //地址和springmvc中控制器地址一致
							success : function(data) {
								if(data.code==1){
									layer.msg(data.msg, {
										icon : 6,
										time : 2000
									}, function() {
										window.location.reload();//刷新
								  });	
								}else{
									layer.msg(data.msg, {
										icon : 1,
										time : 1000
									});
								}
							}
						});

					});
				} else if (obj.event === 'edit') {
					//修改-给我们的表单元素赋值
					$("#hallid2").attr("value", data.hallid);
					$("#hallname2").attr("value", data.hallname);
					console.log($("#hallName2").val());
					//单选框赋值
					$("#halltypeid2").find('option[value='+data.mht.halltypeid+']').prop("selected", true);		
					//radio赋值
					if (data.hallstatus === 1) {
						$("input[name='hallstatus2'][value='1']").prop("checked",
								true);
					} else {
						$("input[name='hallstatus2'][value='0']").prop("checked",
								true);
					} 
                    //渲染radio
					layui.form.render('radio');
                    //弹出修改框
					layer.open({
						type : 1//弹出层 div
						,
						area : [ '600px', '430px' ],
						shade : 0.6,
						id : 'LAY_layuipro' //设定一个id，防止重复弹出
						,
						content : $("#editFormDiv"), //后面不用.html()

					});
					//表单的render
					layui.form.render();
				} 
			});

			/*表格数据重载 模糊检索*/
			var $ = layui.$, active = {
				reload : function() {
					var demoReload = $('#demoReload');
					//执行重载
					table.reload('testReload', {
						page : {
							curr : 1//重新从第 1 页开始
						},
						where : { 
							//检索条件只有一个key : value格式
							keywords : demoReload.val()
						}
					});
				}
			};

			$('.demoTable .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});
			//监听提交  添加
			layui.form.on('submit(addMovieHalls)', function(data) {
				//表单中的数据 进行转换，得到一个json格式的字符串
				console.log("addsubmit");
			    var hallname = $("#hallname1").val();
			    var halltypeid = $("#halltypeid1 option:selected").val();
			    var hallstatus = $("input[name='hallstatus1']:checked").val();
			    
				var mh={
			    		hallname:hallname,
			    		mht:{
			    			halltypeid:halltypeid
			    		},
			    		hallstatus:hallstatus
			    } ;
				//ajax请求实现访问控制器
				$.ajax({
					type : "post", //提交方式
					url : "addMovieHall", ////地址和springmvc中控制器地址一致
					data : JSON.stringify(mh), //提交给控制器的数据
					contentType : "application/json", //提交给控制的数据 格式
					dataType:"json",
					success : function(data) {
						if(data.code==1){
							layer.msg(data.msg, {
								icon : 6,
								time : 2000
							}, function() {
								window.location.reload();//刷新
						  });
							return false;
						}else{
							layer.msg(data.msg, {
								icon : 1,
								time : 1000
							});
							return false;
						}
					}
				});
				return false;
			});
			
			//监听提交  修改
			layui.form.on('submit(updMovieHall)',function(data){
				console.log(JSON.stringify(data.field));
			    
				var	hallid =  $("#hallid2").val();
			    var hallname = $("#hallname2").val();
			    var halltypeid = $("#halltypeid2 option:selected").val();
			    var hallstatus = $("input[name='hallstatus2']:checked").val();
			    console.log("修改");
				
			    var mh={
			    		hallid:hallid,
			    		hallname:hallname,
			    		hallstatus:hallstatus,
			    		mht:{
			    			halltypeid:halltypeid
			    		}
			    }; 
			    console.log(JSON.stringify(mh));
			    $.ajax({
					type : "post",
					url : "updMovieHall",
					data : JSON.stringify(mh),
					contentType : "application/json",
					success : function(data){
							if(data.code==1){
								layer.msg(data.msg, {
									icon : 6,
									time : 2000
								}, function() {
									window.location.reload();//刷新
							  });
								return false;
							}else{
								layer.msg(data.msg, {
									icon : 1,
									time : 1000
								});
								return false;
							}
					},
					dataType:"json"
				});
			    return false;
			});
		});	
	</script>



	<script>
		//JavaScript代码区域
		layui.use('element', function() {
			var element = layui.element;
		});
		var isShow = true; //定义一个标志位
		$('.kit-side-fold').click(function() {
			//选择出所有的span，并判断是不是hidden
			$('.layui-nav-item span').each(function() {
				if ($(this).is(':hidden')) {
					$(this).show();
				} else {
					$(this).hide();
				}
			});
			//判断isshow的状态
			if (isShow) {
				$('.layui-side.layui-bg-black').width(60); //设置宽度
				$('.kit-side-fold i').css('margin-right', '70%'); //修改图标的位置
				//将footer和body的宽度修改
				$('.layui-body').css('left', 60 + 'px');
				$('.layui-footer').css('left', 60 + 'px');
				//将二级导航栏隐藏
				$('dd span').each(function() {
					$(this).hide();
				});
				//修改标志位
				isShow = false;
			} else {
				$('.layui-side.layui-bg-black').width(200);
				$('.kit-side-fold i').css('margin-right', '10%');
				$('.layui-body').css('left', 200 + 'px');
				$('.layui-footer').css('left', 200 + 'px');
				$('dd span').each(function() {
					$(this).show();
				});
				isShow = true;
			}
		});
	</script>

</body>
</html>